<template>
	<fx-list-filter @on-enter="onSearchClick">
		<template slot="row-1">
			<el-form-item label-width="110px">
				<el-select v-model="dateType" prop="dateType" placeholder="请选择" size='mini' style="width: 120px;margin-right: 5px;">
					<el-option
						v-for="item in dateTypeList"
						:key="item.id"
						:label="item.label"
						:value="item.id"
					>
					</el-option>
				</el-select>
				<el-date-picker
						v-model="dateRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
						class="form-date-input"
					></el-date-picker>
			</el-form-item>
			<el-form-item label="工位任务单号：" label-width="110px">
				<el-input v-model="stationTaskCode" placeholder="请输入" class="form-input"/>
			</el-form-item>
			<el-form-item label="工序任务单号：" label-width="110px">
				<el-input v-model="procedureTaskCode" placeholder="请输入" class="form-input"/>
			</el-form-item>
		</template>
    <template slot="row-2">
			<el-form-item label="车间：" label-width="110px">
				<w-select-mulity
					v-model="carRoomIds"
					:optionlist="carRoomList"
					class="form-input"
					@change="changeCarRoom"
				>
				</w-select-mulity>
			</el-form-item>
      <el-form-item label="产线：" label-width="110px">
				<w-select-mulity
					v-model="productionLineIds"
					:optionlist="filterProductionLineList"
					class="form-input"
					@change="changeProductionLine"
				>
				</w-select-mulity>
			</el-form-item>
      <el-form-item label="工位：" label-width="110px">
				<w-select-mulity
					v-model="stationIds"
					:optionlist="filterStationList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
      <el-form-item label="生产批次号：" label-width="110px">
				<el-input v-model="productionBatchNo" placeholder="请输入" class="form-input"/>
			</el-form-item>
      <el-form-item label="生产状态：" label-width="110px">
				<w-select-mulity
					v-model="states"
					:optionlist="stateList"
					:optionProp="optionProp"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
		</template>
		<template slot="tools">
			<el-button class="order-btn" type="primary" @click="onSearchClick">查询</el-button>
			<el-button class="order-btn" type="text"  @click="onResetClick">重置</el-button>
		</template>
	</fx-list-filter>
</template>
<script>
export default {
	name: 'filterBar',
	props: {
		carRoomList: {
			type: Array,
			default: () => {
				return []
			}
		},
		productionLineList: {
			type: Array,
			default: () => {
				return []
			}
		},
		stationList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	computed: {
		filterProductionLineList () {
			const	filterProductionLine = this.productionLineList.filter(p => {
				if (this.carRoomIds.length > 0) {
					if (this.carRoomIds.indexOf(p.carRoomId) !== -1) {
						return p
					}
				} else {
					return p
				}
			})
			return filterProductionLine
		},
		filterStationList () {
			const	filterStation = this.stationList.filter(p => {
				if (this.carRoomIds.length > 0) {
					if (this.productionLineIds.length > 0) {
						if (this.productionLineIds.indexOf(p.productionLineId) !== -1) {
							return p
						}
					} else {
						if (this.carRoomIds.indexOf(p.carRoomId) !== -1) {
							return p
						}
					}
				} else {
					if (this.productionLineIds.length > 0) {
						if (this.productionLineIds.indexOf(p.productionLineId) !== -1) {
							return p
						}
					} else {
						return p
					}
				}
			})
			return filterStation
		}
	},
	data () {
		return {
			dateTypeList: [{
				id: 1,
				label: '任务单日期'
			}, {
				id: 2,
				label: '签发日期'
			}],
			dateType: 1,
			optionProp: {
				id: 'id',
				name: 'label',
				value: 'id',
				disabled: 'disabled'
			},
			stationTaskCode: '',
			procedureTaskCode: '',
			dateRange: [],
			carRoomIds: [],
			productionLineIds: [],
			stationIds: [],
			productionBatchNo: '',
			states: [],
			stateList: this.$fxStateMiddleware.getStateConfig('state')
		}
	},
	methods: {
		onSearchClick () {
			this.$emit('on-search', this.getFilterParams())
		},
		onResetClick () {
			this.stationTaskCode = ''
			this.procedureTaskCode = ''
			this.dateRange = []
			this.carRoomIds = []
			this.productionLineIds = []
			this.stationIds = []
			this.productionBatchNo = ''
			this.states = []
		},
		getFilterParams () {
			const filterSearch = {
				stationTaskCode: this.stationTaskCode,
				procedureTaskCode: this.procedureTaskCode,
				dateType: this.dateType,
				startDate: (this.dateRange && this.dateRange[0]) || '',
				endDate: (this.dateRange && this.dateRange[1]) || '',
				carRoomIds: this.carRoomIds,
				productionLineIds: this.productionLineIds,
				stationIds: this.stationIds,
				productionBatchNo: this.productionBatchNo,
				states: this.states
			}
			const params = {}
			Object.keys(filterSearch).forEach(key => {
				if (filterSearch[key] !== '') {
					params[key] = filterSearch[key]
				}
			})
			return {
				...params
			}
		},
		// 改变车间
		changeCarRoom (val) {
			this.productionLineIds = []
			this.stationIds = []
		},
		// 改变产线
		changeProductionLine (val) {
			this.stationIds = []
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-date-input {
	width: 385px
}
.form-input {
	width: 140px
}
</style>
